<template>
  <div class="login">
    <div class="login-title">
      <img src="../../assets/logo.png" alt="">
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item prop="name">
    <el-input class="iconfont" v-model="ruleForm.username" type="username" prefix-icon="icon-tubiao211" clearable></el-input>
  </el-form-item>
  <el-form-item prop="pass">
    <el-input class="iconfont" v-model="ruleForm.password" type="password" prefix-icon="icon-lock" clearable></el-input>
  </el-form-item>
  <el-form-item class="login_btn">
    <el-button type="primary" @click="LoginForm">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import { login } from '@/api/login'
import {setItem} from '@/utils/storage'
export default {
  name:"login",
 data() {
      return {
        ruleForm: {
          username: 'admin',
          password: '123456',
        },
      rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '用户名6到12位', trigger: 'blur' }
          ],
          pass: [
             { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '密码格式不正确，6到12位', trigger: 'blur' }

          ]
        }
      };
    },
    methods: {
      // 登录
      async LoginForm() {
        const {data} = await login({
          username:this.ruleForm.username,
          password:this.ruleForm.password
        })

        console.log(data, '')
        if(data.meta.status!==200){
          this.$message.error(data.meta.msg);
        }else{
           this.$message({
          message:data.meta.msg,
          type: 'success'
        });
        this.$store.commit('setData',data.data.token)
        }
        this.$router.push('/home')
      },
    //  重置
     resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="less" scope>
  .login{
    width: 400px;
    height: 320px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-200px,-160px);
    .login-title{
      width: 100px;
      height: 100ox;
      border-radius: 50%;
      border: 1px solid #ccc;
      background: #fff;
      overflow: hidden;
      box-shadow: 5px 5px 8px #888888;
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50px,100px);
      img{
        width: 100%;
        height: 100%;
      }
    }
    .el-form{
      padding:80px 40px 0 40px;
      .el-form-item__content{
      margin-left: 0!important;
     width: 100%;
     .el-input__icon{
       font-style:normal;
       color: #666;
     }
    }
    }
    .login_btn{
      text-align: right;
    }
  }
</style>
